// Most of codes are borrowed from Bootstrap v5

@import 'variables';

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: $color-background;
  background-clip: padding-box;
  outline: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 500ms ease-in-out;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $width-gap-half;
}

.offcanvas-title {
  margin-bottom: 0;
}

.offcanvas-body {
  flex-grow: 1;
  padding: $width-gap-half;
  overflow-y: auto;
}

.offcanvas-start {
  top: 0;
  left: 0;
  width: 70%;
  transform: translateX(-100%);
}

.offcanvas.show {
  transform: none;
}

.offcanvas-backdrop::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 899;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0;
}